<template>
    <el-container>
        <!-- 头部区域 -->
        <el-header>
            <!-- 导航栏 -->
            <el-row class="topbar box-width">
                <el-col class="slogan">
                    一间花店
                </el-col>
                <el-col class="btn-box">
                    <span>登录</span>
                    <el-divider direction="vertical"></el-divider>
                    <span>注册</span>
                    <el-divider direction="vertical"></el-divider>
                    <span>我的信息</span>
                    <el-divider direction="vertical"></el-divider>
                    <span><i class="el-icon-shopping-cart-2">购物车</i></span>
                </el-col>
            </el-row>
            <!-- 导航菜单区域 -->
            <el-row>

            </el-row>
        </el-header>
        <!-- 主要内容区域 -->
        <el-main>Main</el-main>
        <!-- 底部区域 -->
        <el-footer>Footer</el-footer>
    </el-container>
</template>

<script>
export default {
    
}
</script>
<style lang="less" scoped>
//统一宽度和边距样式
.box-width {
    width: 1240px;
    margin: 0 auto;
}
//头部区域样式
.el-header {
    width: 100%;
    background-color: #414141;
    margin: 0 auto;
}
//导航栏样式
.topbar {
    color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-width: 1240px;
    
}
//=======头部区域样式End=======
//主要内容区域样式
.el-main {
    width: 100%;
    background-color: #fff;
}
//=======主要内容区域样式End=======
//底部区域样式
.el-footer {
    width: 100%;
    background-color: #414141;
}
//=======底部区域样式End=======
</style>
